<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue-router</title>
  </head>
  <body>
    <!-- 第三步创建vue挂载区域 -->
    <div id="app">
      <!-- 第四步路由的标签 -->
      <router-link :to="{name:'Model7',params:{id:5,name:'Model7',age:'1000'}}">
        Model7
      </router-link>
      <!-- 创建占位符 -->
      <router-view></router-view>
    </div>
    <!-- 第一步 -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 第二部 -->
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
    <script>
      // 创建路由组件
      const Model7 = {
        // props: [{ id: 5, name: 'Model7', age: '1000' }],
        template: `
            <div>
                {{$route.params.id}},,,,{{$route.params.name}},,,,{{$route.params.age}}
                命名路由
                </div>
            `,
      }

      // 创建路由规则
      const luyou = new VueRouter({
        routes: [
          { path: '/test/:id/:name/:age', component: Model7, name: 'Model7' },
        ],
      })
      //   创建vue实例
      const vm = new Vue({
        el: '#app',
        data: {},

        // 重要
        router: luyou,
      })
    </script>
  </body>
</html>
